$num: 0; //循环计数器
$sum: 30; //循环次数，用于控制生成calss的数量
$step: 2; //步长，由于设计稿2rpx=1px，故此处步长为2
$pixis: 'px'; //单位
//颜色数组，可拓展，下方2个数组长度必须一致
$color_name_list: 'primary', 'success', 'warning', 'error', 'info', '333', '797979', 'eee', '808080',
  'F4F7FB', '768895', '51C3FF', 'FF9B21', '9CADBB', '0E1F35', 'A3A3A3', '30C9A1', '666666', 'FF4040',
  'F8AC23', 'F6F6F6', '262A30', 'F8F8F8', 'F0F0F0', '444444';
$color_list: #007aff, #4cd964, #f0ad4e, #dd524d, #636e72, #333, #797979, #eee, #808080, #f4f7fb,
  #768895, #51c3ff, #ff9b21, #9cadbb, #0e1f35, #a3a3a3, #30c9a1, #666666, #ff4040, #f8ac23, #f6f6f6,
  #262a30, #f8f8f8, #f0f0f0, #444444;

//尺寸数组
$size_name_list: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl',
  '9xl';
$text_size_list: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96, 128; //字体大小
$rounded_size_list: 5, 8, 10, 12, 16, 24, 36, 48, 56, 72, 96, 128, 256; //圆角

// 百分比 高度、宽度拓展
@for $precentage from 1 through 10 {
  .w-p-#{$precentage * 10} {
    width: #{$precentage * 10}#{'%'};
  }

  .h-p-#{$precentage * 10} {
    height: #{$precentage * 10}#{'%'};
  }
}

// 颜色
@each $color in $color_list {
  $i: index($color_list, $color);
  $name: nth(
    $list: $color_name_list,
    $n: $i
  );
  $color_num: 0;

  .bg-#{$name} {
    background-color: rgba($color: $color, $alpha: 1);
  }

  .text-#{$name} {
    color: rgba($color: $color, $alpha: 1);
  }

  .border-#{$name} {
    border-color: rgba($color: $color, $alpha: 1);
  }
}

// 字体、边框圆角
@each $size in $size_name_list {
  $i: index($size_name_list, $size); //索引
  $text_size: nth(
    $list: $text_size_list,
    $n: $i
  );
  $rounded_size: nth(
    $list: $rounded_size_list,
    $n: $i
  );

  .text-#{$size} {
    font-size: #{$text_size}px;
  }

  .rounded-#{$size} {
    border-radius: #{$rounded_size * $step}#{$pixis};
  }
}
